<template>
    <div class="box">
        <h2>.sync 修饰符</h2>
        <div>数据msg: {{ msg }}</div>

        <Child1 :qwer="msg" @update:qwer="msg = $event"></Child1>

        <Child1 :qwer.sync="msg"></Child1>
    </div>
</template>

<script>
// 实现父子组件之间的数据同步,除了使用 v-model 之外,还能不能用其他方式?
// 可以, 使用 .sync 修饰符,这个修饰符也是需要我们在组件内部自己实现
// 步骤:
// 1. 首先实现一个父子组件之间的数据同步
//      <Child1 :qwer="msg" @abc="msg = $event"></Child1>
//      数据的流向:
//      1. msg通过 :qwer 属性传给子组件,在子组件中接收,进行展示
//      2. 点击按钮的时候,触发 abc 事件,就修改之后的数据传递给父组件
//          父组件自定义事件接收到传回来的参数,修改了 msg 的值
//      3. msg的值发生改变之后,重新流到子组件
// 2. 给子组件传递的属性 和 触发的自定义事件 都是我们自己起的名字
//      那么想叫什么叫什么,现在替换 自定义事件的名称
//      <Child1 :qwer="msg" @update:qwer="msg = $event"></Child1>
// 3. 此时我们实现父子组件间的数据同步的两个条件变成了如下
//      :qwer   @update:qwer
//          格式是  ->    :xxx  @update:xxx
// 4. 此时,就可以把刚刚这两个条件,替换成 .sync 修饰符了
//      <Child1 :qwer.sync="msg"></Child1>
// 结论:
//      .sync 修饰符可以实现父子之间的数据同步,子组件[必须]实现两个条件
//          1. :xxx   2. @update:xxx
//          注意: 这两个条件中的 xxx 必须相同
// 犟嘴1:
//      条件2  @update:xxx  不使用 update: 能不能行,变成 @xxx 或者其他的自定义函数行不行?
//      不行, 条件2 必须使用 update: 开头
// 犟嘴2:
//      :xxx 和 @update:xxx 这两个条件中的 xxx 必须一样吗?可不可以不一样?
//      不行, :xxx 和 @update:xxx 这两个条件中的 xxx 必须一样
// 在哪见过?
//      element ui 中的 dialog组件 使用的就是 .sync 修饰符,实现父子组件间的数据同步
// 场景?
//      一般情况下,当封装组件的时候,组件中没有input框的时候,此时使用 .sync 实现父子组件间的数据同步
//      一般情况下,封装组件的时候,封装的是input框,此时使用 v-model 比较合适
//      二班情况,不按一般情况走,只要想实现父子组件间的数据同步,使用 v-model 和 .sync 都可以,你开心就好
import Child1 from './Child1.vue'
export default {
    name: "SyncTest",
    components: { Child1 },
    data() {
        return {
            msg: '我爱你'
        }
    }
}
</script>

<style scoped>

</style>